{include file="public/layout" /}
{include file="gzh/header" /}
{load href="__PUBLIC__/plugins/Ueditor/ueditor.config.js" /}
{load href="__PUBLIC__/plugins/Ueditor/ueditor.all.min.js" /}
{load href="__PUBLIC__/plugins/Ueditor/lang/zh-cn/zh-cn.js" /}
<link href="__SKIN__/css/gzh/wx_graphic_message.css?v={$version}" rel="stylesheet" type="text/css" />

<body class="bodystyle" style="overflow-y: scroll; cursor: default; -moz-user-select: inherit;">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
{include file="canal/left" /}
<div class="page min-hg-c-10" style="min-width:auto;margin-left:100px;">

    <div class="fixed-bar">
        <div class="item-title">
            <a class="back_xin" href="{:url('Gzh/material_list_pictext')}" title="返回"><i class="iconfont e-fanhui"></i></a>
            <div class="subject">
                <h3>新增图文素材</h3>
                <h5></h5>
            </div>
        </div>
    </div>
    <form class="form-horizontal" id="post_form" action="" method="post" enctype="multipart/form-data">
        <div class="ncap-form-default">
            <div id="graphic_message">
                <div class="graphic-message"><img src="__SKIN__/images/gzh/mobile_head.png">
                    <ul class="graphic-message-list">
                        <li class="li0 on" data-n="0" onclick="change_li(this,0);">
                            <div class="div_content" style="margin: unset;">
                                 <div class="empty-img empty-img0">
                                     <span class="empty-hint">封面图片</span>
                                 </div>
                                <div class="mask-layer"></div>
                                <h4 class="title"><span id="show_title0">标题</span></h4>
                            </div>
                            <div class="action"><span class="edit" onclick="change_li(this,0);">编辑</span></div>
                        </li>
                    </ul>
                    <div class="add-graphic-message">
                        <h4><a href="javascript:void(0);" id="add-new-item">新增</a></h4>
                    </div>
                    <div class="bottom-botton">
                        <span class="layui-btn" onclick="formSubmit();">保存</span>
                    </div>
                </div>

                <div class="editor-box editor-box_0">
                    <div class="editor-title">
                        <label>标题<span class="prompt">（必填）</span> </label>
                        <input id="title0" placeholder="请在这里输入标题" maxlength="64" class="layui-input"
                               name="data[0][title]" oninput="inputChange(this,0);">
                    </div>
                    <div class="editor-author">
                        <label>作者<span class="prompt">（选填）</span></label>
                        <input id="author0" placeholder="请输入作者" maxlength="16" class="layui-input"
                               name="data[0][author]">
                    </div>
                    <div class="editor-cover">
                        <label>封面<span class="prompt">（图片建议尺寸：900 x 500像素 必填）</span></label>
                        <div class="layui-input-block img-upload-wx">
                            <div class="upload-img-block">
                                <!-- 上传图片后下面类判断加hover -->
                                <div class="upload-img-box upload-img-box0" onclick="GetUploadify(1,'','allimg','call_back_0')">
                                    <div id="uploadImg" class="upload-default">
                                        <div id="preview_uploadImg0" class="preview_img">
                                            <div class="upload"><i class="iconfont iconshangchuan"></i><p>点击上传</p></div>
                                        </div>
                                    </div>
                                    <input class="layui-upload-file" type="file" accept="" name="file">
                                    <div class="operation">
                                        <div>
                                            <i title="编辑" onclick="GetUploadify(1,'','allimg','call_back_0')" class="layui-icon layui-icon-edit js-replace" style="margin-right: 20px;"></i>
                                            <i title="删除" onclick="del_litpic(this,0)" class="layui-icon layui-icon-delete js-delete"></i>
                                        </div>
                                    </div>
                                    <input type="hidden" name="data[0][litpic]" id="litpic0">
                                </div>
                            </div>
                        </div>
                        <!--<label for="show_cover_pic" class="editor-msg-label">-->
                            <!--<input type="checkbox" id="show_cover_pic0" name="data[0][show_cover_pic]" value="1">-->
                            <!--封面图片显示在正文中-->
                        <!--</label>-->
                    </div>
                    <div class="editor-content">
                        <label>正文<span class="prompt">（必填）</span></label>
                        <div id="editor" class="edui-default">
                            <textarea class="span12 ckeditor" id="intro_0" name="data[0][intro]"></textarea>
                            <div class="opt-moreOper" style="margin-top: 20px;">
                                <p>
                                    <a href="javascript:void(0);" onclick="remote_to_local(0);" class="ncap-btn2">远程图片本地化</a>&nbsp;
                                    <a href="javascript:void(0);" onclick="replace_links(0);"
                                       class="ncap-btn2">清除非本站链接</a>&nbsp;
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="editor-url">
                        <label>原文链接<span class="prompt">（选填）</span></label>
                        <input id="original_url0" placeholder="例：http://www.example.com" maxlength="100"
                               class="layui-input" name="data[0][original_url]">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    // 判断输入框是否为空
    function formSubmit(){
        layer_loading('正在处理');
        var url = "{:url('Gzh/material_pictext_add')}";
        $.ajax({
            type: 'POST',
            url: url,
            data: $("#post_form").serialize(),
            dataType: 'json',
            success: function(res) {
                layer.closeAll();
                if (res.code == 1) {
                    layer.msg(res.msg, {icon: 1, time:1000}, function(){
                        location.href = "{:url('Gzh/material_list_pictext')}"
                    });
                } else {
                    layer.msg(res.msg, {icon: 5});
                }
            },
            error:function (e) {
                layer.alert(e.responseText);
            }
        });
    }

    var ueditor_url = "{:url('Ueditor/index',array('savepath'=>'allimg'))}";
    $(function () {
        // 监听新增按钮的点击事件
        $('#add-new-item').click(function (e) {
            e.preventDefault();
            var length = $(".graphic-message-list li").length;
            var n = $(".graphic-message-list li:last").eq(0).data('n') + 1;
            if (length < 8) {
                var html = '<li class="li'+n+'" data-n="'+n+'" onclick="change_li(this,'+n+');">' +
                    '<div class="div_content">\n' +
                    '<div class="empty-img empty-img'+n+'"><span class="empty-hint">封面图片</span></div>' +
                    '<div class="mask-layer"></div>' +
                    '<h4 class="title"><span id="show_title'+n+'">标题</span></h4>' +
                    '</div>' +
                    '<div class="action">' +
                    '<span class="edit" onclick="change_li(this,'+n+');">编辑</span>' +
                    '<span class="delete" onclick="del_li(this,'+n+');">删除</span>' +
                    '</div>' +
                    '</li>';
                // 将新的li元素添加到ul列表中
                $('.graphic-message-list').append(html);
            }
            add_li(n);
        });

    });

    function call_back_0(fileurl_tmp)
    {
        call_back(0,fileurl_tmp);
    }

    function change_li(obj,cur) {
        $(".graphic-message-list li").removeClass('on');
        $(".editor-box").hide();
        $('.li'+cur).eq(0).addClass('on');
        $(".editor-box_" + cur).show();
    }

    function del_li(obj,cur) {
        $(".graphic-message-list .li"+cur).remove();
        $(".editor-box_"+cur).remove();
    }

</script>
<script src="__SKIN__/js/gzh/material.js?v={$version}"></script>

<script type="text/javascript">
    var ue_intro_0 = UE.getEditor('intro_0', {
        serverUrl: ueditor_url,
        zIndex: 999,
        initialFrameWidth: "100%", //初化宽度
        initialFrameHeight: 450, //初化高度
        focus: false, //初始化时，是否让编辑器获得焦点true或false
        maximumWords: 99999,
        removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',//允许的最大字符数 'fullscreen',
        pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        autoHeightEnabled: false,
        toolbars: ueditor_toolbars
    });
    //必须在提交前渲染编辑器；
    function intro_0() {
        //判断编辑模式状态:0表示【源代码】HTML视图；1是【设计】视图,即可见即所得；-1表示不可用
        if (UE.getEditor("intro_0").queryCommandState('source') != 0) {
            UE.getEditor("intro_0").execCommand('source'); //切换到【设计】视图
        }
    }
</script>
<script>
    // 远程图片本地化
    function remote_to_local(num) {
        var body = UE.getEditor("intro_" + num).getContent();
        layer_loading('下载中');
        $.ajax({
            type: 'POST',
            url: "{:url('Archives/ajax_remote_to_local')}",
            data: {body: body, _ajax: 1},
            dataType: "JSON",
            success: function (res) {
                layer.closeAll();
                if (res.code == 1) {
                    UE.getEditor("intro_" + num).setContent(res.data.body);
                    layer.msg(res.msg, {icon: 1, time: 1000});
                } else {
                    showErrorMsg(res.msg);
                }
            },
            error: function (e) {
                layer.closeAll();
                showErrorMsg(res.msg);
            }
        });
    }

    // 清除非本站链接
    function replace_links() {
        var body = UE.getEditor("intro_" + num).getContent();
        layer_loading('正在处理');
        $.ajax({
            type: 'POST',
            url: "{:url('Archives/ajax_replace_links')}",
            data: {body: body, _ajax: 1},
            dataType: "JSON",
            success: function (res) {
                layer.closeAll();
                if (res.code == 1) {
                    UE.getEditor("intro_" + num).setContent(res.data.body);
                    layer.msg(res.msg, {icon: 1, time: 1000});
                } else {
                    showErrorMsg(res.msg);
                }
            },
            error: function (e) {
                layer.closeAll();
                showErrorMsg(res.msg);
            }
        });
    }
</script>
{include file="public/footer" /}